<template>
	<view class="page_view">
		<view class="fankui_top">
			<view class="fankui_top_title">
				反馈描述
			</view>
			<textarea class="textarea" v-model="content" placeholder="说说您的建议或问题，以便我们提供更好的服务" placeholder-style="color: #A0A0A0;"></textarea>
			<view class="img_list" >
				<image :src="ImgUrl+item" mode="" class="img_list_item" v-for="(item,index) in img_list"></image>
			</view>
			<view class="fankui_top_bottom flex">
				<view class="fankui_top_bottom_left" @click="choose_img">
					<image src="/static/images/xiangji.png" class="fankui_top_bottom_left_icon" mode=""></image>
					<view class="fankui_top_bottom_left_text">
						添加图片
					</view>
				</view>
				<view class="fankui_top_bottom_num">
					{{num}}/300
				</view>
			</view>
		</view>
		<view class="fankui_top mar20">
			<view class="fankui_top_title">
				联系方式
			</view>
			<input type="text" v-model="mobile" class="fankui_phone" placeholder="请输入您的手机号（选填）" placeholder-style="color: #A0A0A0;">
		</view>
		<view class="btn" @click="subimt">
			提交
		</view>
	</view>
</template>

<script>
	import{feed_back}from '@/api/common.js'
	import uploadImage from '@/common/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				content:'',
				// ImgUrl:this.$ImgUrl,
				img_list:[
					
				],
				ImgUrl:this.$ImgUrl,
				mobile:'',
				sourceType:[]
			}
		},
		onBackPress() {
			if (uni.getStorageSync('fromStart')) {
				uni.setStorageSync('fromStart',false);
				uni.switchTab({
					url:'/pages/index/index'
				})
				return true;
			}
		},
		computed:{
			// ImgUrl(){
			// 	return this.$store.state.config.ImgUrl
			// },
			num(){
				return this.content.length
			}
		},
		methods: {
			choose_img(){
				let t = this;
				uni.showActionSheet({
					itemList: ['拍摄','从相册选择'],
					success: function (res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						if(res.tapIndex==0){
							t.sourceType = ['camera'];
							t.choose_img2();
						}else{
							t.sourceType = ['album'];
							t.choose_img2();
						}
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			choose_img2(){
				let t = this
				uni.chooseImage({
					count:1,
					sourceType:t.sourceType,
					success(res) {
						console.log(res)
						// uni.showToast({
						// 	title:'1333'
						// })
						let path = res.tempFilePaths[0]
						uploadImage(path,'','wechat/',(res) => {
							t.img_list.push(res.imgName)
						})
					},
					fail:res=>{
						console.log(res)
						// uni.showToast({
						// 	title:'13334'
						// })
					}
				})
			},
			subimt(){
				let t = this
				feed_back({
					content:t.content,
					img:JSON.stringify(t.img_list),
					mobile:t.mobile
				}).then(res=>{
					console.log(res)
					if(res.code == 200001){
						uni.showToast({
							title:'您的反馈已提交',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F4F4F4;
	}
.page_view{
	padding: 0 24rpx;
	padding-top: 32rpx;
	box-sizing: border-box;
}
.fankui_top{
	width: 100%;
	/* height: 720rpx; */
	border-radius: 12rpx;
	background: #FFF;
	padding: 32rpx 24rpx;
	box-sizing: border-box;
}
.fankui_top_title{
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 28rpx;
	font-weight: 700;
}
.textarea{
	width: 100%;
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 26rpx;
	font-weight: 400;
	margin-top: 24rpx;

}
.img_list{
	display: grid;
	grid-template-columns: repeat(4, 150rpx);
	grid-gap: 20rpx 18rpx;
	margin-top: 20rpx;
}
.img_list_item{
	width: 150rpx;
	height: 150rpx;
	background: #ccc;
}
.fankui_top_bottom{
	width: 100%;
	margin-top: 30rpx;
	
}
.fankui_top_bottom_left{
	width: 128rpx;
	height: 128rpx;
	border-radius: 8rpx;
	border: 1px solid #EEE;
}
.fankui_top_bottom_left_icon{
	width: 60rpx;
	height: 60rpx;
	display: block;
	margin: 0 auto;
	margin-top: 18rpx;
}
.fankui_top_bottom_left_text{
	color: #999;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
	text-align: center;
}
.fankui_top_bottom_num{
	color: #A0A0A0;
	text-align: right;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 26rpx;
	font-weight: 400;
	margin-top: 100rpx;
}
.mar20{
	margin-top: 24rpx;
}
.fankui_phone{
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 26rpx;
	font-weight: 400;
	height: 80rpx;
}
.btn{
	width: 686rpx;
	height: 80rpx;
	border-radius: 40rpx;
	background: #0165FB;
	text-align: center;
	line-height: 80rpx;
	position: fixed;
	bottom: 80rpx;
	left: 32rpx;
	color: #FFF;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 28rpx;
	font-weight: 400;
}
</style>
